<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="charts.css">
</head>

<body>

<div class="l-col">
  <h2 class="title header">APP使用情況统计</h2>
  <div id="info">
    <div class="w-box"><p>今日计划完成数</p>
      <h2>12/24</h2></div>
    <div class="w-box"><p>发布动态数</p>
      <h2>5</h2></div>
    <div class="m-box"><p>累计使用天数</p>
      <h2>21</h2></div>
    <div class="m-box"><p>打卡天数</p>
      <h2>14</h2></div>
    <div class="m-box"><p>获得点赞数</p>
      <h2>100</h2></div>
    <div class="m-box"><p>评论数</p>
      <h2>20</h2></div>
  </div>
</div>
<div class="l-col">
  <h2 class="title header">计划进度</h2>
  <p class="sub-title">今日计划</p>
  <div id="progress-view1"></div>
  <p class="sub-title">长期计划</p>
  <div id="progress-view2"></div>
</div>

<div class="l-col">
  <h2 class="title header">本周计划完成情况</h2>
  <div id="water-ball-view"></div>
</div>
<div class="row">
  <div class="m-col">
    <h2 class="title header">本月数据统计</h2>
    <div id="calendar-view"></div>
  </div>
  <div class="s-col" style="height: auto;margin-top: 0">
    <h2 class="title">时间轴</h2>
    <div id="time-line" style="height: 600px;padding-bottom: 20px;">

      <div class="item">
        <div class="point"></div>
        <div>
          <p class="content">发表计划-读书</p>
          <p class="date"><i>2021/08/02</i></p>
        </div>
      </div>
      <div class="item">
        <div class="point"></div>
        <div>
          <p class="content">发表计划-读书</p>
          <p class="date"><i>2021/08/02</i></p>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="row">
  <div class="s-col">
    <h2 class="title">我的笔记</h2>
    <div id="pie-view"></div>
  </div>
  <div class="s-col">
    <h2 class="title">我的状态</h2>
    <div id="radar-view"></div>
  </div>
  <div class="s-col">
    <h2 class="title">我的得分</h2>
    <div id="score-view"></div>
  </div>
</div>
<script type="text/javascript" src="Util.js"></script>
<script type="text/javascript" src="ConstData.js"></script>
<script type="text/javascript" src="PieView.js"></script>
<script type="text/javascript" src="RadarView.js"></script>
<script type="text/javascript" src="ScoreView.js"></script>
<script type="text/javascript" src="ProgressView.js"></script>
<script type="text/javascript" src="WaterBallView.js"></script>
<script type="text/javascript" src="CalendarView.js"></script>
<script type="text/javascript" src="data.js"></script>
</body>
</html>
